<template>
    <div class="app-container">
        <searchForm :formOptions="formOptions" @onSearch="onSearch" @onReset="onReset"
            :formLabelWidth="formLabelWidth" v-show="showSearch" />
        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table :data="tableData" v-loading="loading" border stripe>
            <el-table-column label="学生姓名" prop="studentName" :show-overflow-tooltip="true" align="center" width="100" />
            <el-table-column label="注册号" prop="registerCode" :show-overflow-tooltip="true" align="center" width="120" />
            <el-table-column label="年级名称" prop="gradeName" :show-overflow-tooltip="true" align="center" width="100" />
            <el-table-column label="班级名称" prop="className" :show-overflow-tooltip="true" align="center" width="120" />
            <el-table-column label="返校时间" prop="returnDate" :show-overflow-tooltip="true" align="center" width="120" />
            <!-- <el-table-column label="出发地点" prop="goAddress" :show-overflow-tooltip="true" align="center" width="150" /> -->
            <el-table-column label="到达地点" prop="reachAddress" :show-overflow-tooltip="true" align="center"
                width="150" />
            <el-table-column label="航班" prop="flight" :show-overflow-tooltip="true" align="center" width="100" />
            <el-table-column label="机场" prop="airport" :show-overflow-tooltip="true" align="center" width="120" />
            <el-table-column label="火车" prop="train" :show-overflow-tooltip="true" align="center" width="100" />
            <el-table-column label="出发车站" prop="goSite" :show-overflow-tooltip="true" align="center" width="120" />
            <el-table-column label="到达车站" prop="reachSite" :show-overflow-tooltip="true" align="center" width="120" />
            <el-table-column label="体温" prop="temperature" :show-overflow-tooltip="true" align="center" width="80" />
            <el-table-column label="健康状况" prop="health" :show-overflow-tooltip="true" align="center" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.flag === '1' ? '异常' : '正常' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="健康状况说明" prop="healthMsg" :show-overflow-tooltip="true" align="center" width="150" />
            <el-table-column label="特殊人群标记" prop="flag" :show-overflow-tooltip="true" align="center" width="120">
                <template slot-scope="scope">
                    <span>{{ scope.row.flag === '1' ? '已标记' : '正常' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="学生确认状态" prop="stuConfirm" :show-overflow-tooltip="true" align="center" width="120">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.stuConfirm == '0'" type="info">未确认</el-tag>
                    <el-tag v-else-if="scope.row.stuConfirm == '1'" type="success">确认返校</el-tag>
                    <el-tag v-else-if="scope.row.stuConfirm == '2'" type="warning">确认未返校</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="老师确认状态" prop="confirm" :show-overflow-tooltip="true" align="center" width="120">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.confirm == '0'" type="info">未确认</el-tag>
                    <el-tag v-else-if="scope.row.confirm == '1'" type="success">确认返校</el-tag>
                    <el-tag v-else-if="scope.row.confirm == '2'" type="warning">确认未返校</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="280">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleUpdate(scope.row)"
                        v-hasPermi="['dailyroutine:toschool:edit']">修改</el-button>
                    <el-button size="mini" type="success" @click="handleConfirm(scope.row, '1')"
                        :disabled="scope.row.stuConfirm != '1'"
                        v-hasPermi="['dailyroutine:toschool:edit']">确认返校</el-button>
                    <el-button size="mini" type="warning" @click="handleConfirm(scope.row, '2')"
                        :disabled="scope.row.stuConfirm != '1'"
                        v-hasPermi="['dailyroutine:toschool:edit']">确认未返校</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <editDlg ref="editDlgRef" @onSearch="getList"></editDlg>
    </div>
</template>

<script>
import searchForm from "@/components/Search/searchForm.vue";
import editDlg from "./modules/editDlg.vue";
import {
    toSchoolList,
    confirmReturn
} from "@/api/dailyroutine/toSchool.js";
export default {
    name: "toSchool",
    components: {
        searchForm,
        editDlg
    },
    data() {
        return {
            formLabelWidth: "120px",
            formOptions: [
                {
                    label: "学生姓名",
                    prop: "studentName",
                    element: "el-input",
                    placeholder: "请输入学生姓名"
                },
                {
                    label: "注册号",
                    prop: "registerCode",
                    element: "el-input",
                    placeholder: "请输入注册号"
                },
                {
                    label: "学生状态确认",
                    prop: "stuConfirm",
                    element: "el-select",
                    width: "120px",
                    placeholder: "请选择学生状态",
                    options: [
                        { label: "已确认", value: "1" },
                        { label: "未确认", value: "0" }
                    ]
                },
                {
                    label: "老师状态确认",
                    prop: "confirm",
                    element: "el-select",
                    width: "120px",
                    placeholder: "请选择老师状态",
                    options: [
                        { label: "已确认", value: "1" },
                        { label: "未确认", value: "0" }
                    ]
                }
            ],
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            tableData: [],
            // 遮罩层
            loading: true,
            total: 0
        }
    },
    computed: {

    },
    created() {
        this.getList()
    },
    methods: {
        onSearch(val) {
            // 查询条件和分页数据合并
            this.queryParams = Object.assign(this.queryParams, val);
            this.getList();
        },
        // 重置
        onReset(data) {
            this.queryParams = Object.assign(this.queryParams, data);
            this.getList();
        },
        handleUpdate(row) {
            this.$refs.editDlgRef.open(row)
        },
        // 确认返校状态
        handleConfirm(row, confirmStatus) {
            const text = confirmStatus === '1' ? '确认返校' : '确认未返校';
            this.$modal.confirm('是否' + text + '？').then(() => {
                return confirmReturn({
                    id: row.id,
                    confirm: confirmStatus
                });
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess(text + '成功');
            }).catch(() => { });
        },
        getList() {
            this.loading = true;
            toSchoolList(this.queryParams).then((res) => {
                this.tableData = res.rows
                this.loading = false;
                this.total = res.total
            })
        }
    }
}
</script>

<style></style>